import type { Parameter } from '../types/Parameter'
import type { TableColumnsType } from 'antd'
import { Table, Divider } from 'antd'
import { useState, useEffect, useMemo } from 'preact/hooks'

export default function Parameters({ parameters, segment }: { parameters?: Array<Parameter>, segment: string }) {
    const groupParameters = (params: Parameter[], key: keyof Parameter) => {
        return params.reduce((acc: Record<string, Parameter[]>, param) => {
            const groupKey = String(param[key]);
            (acc[groupKey] || (acc[groupKey] = [])).push(param);
            return acc;
        }, {});
    };

    if (parameters !== undefined) {
        console.log('Parameters:', groupParameters(parameters, 'in'), segment);
    }



    const columns = useMemo<TableColumnsType<Parameter>>(() => [
        {
            key: 'name',
            title: 'Name',
            dataIndex: 'name',
        },
        {
            key: 'in',
            title: 'In',
            dataIndex: 'in',
        },
        {
            key: 'required',
            title: 'Required',
            render: (_, record) => record.required ? 'Yes' : 'No',
        },
        {
            key: 'type',
            title: 'Type',
            dataIndex: 'schema.type',
            render: (_, record) => {
                const type = record.schema?.type;
                const format = record.schema?.format;
                return type + (format ? ` (${format})` : '')
            }
        }, {
            key: 'description',
            title: 'Description',
            dataIndex: 'description',
        },
    ], [])
    return (
        <>
            <Divider orientation="left" orientationMargin="0">Parameters</Divider>
            <Table<Parameter>
                dataSource={parameters}
                columns={columns}
                pagination={false}
            />
        </>
    );
}